<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="top_bj">
			<!-- 顶部区域 -->
			<view class="user-pic">
				<!-- 宴会筹备-盒子 -->
				<uni-row class="demo-uni-row">
					<text style="font-size: 32upx;">酒宴筹备</text>
				</uni-row>
				<!-- 用户基本信息(头像) -->
				<uni-row class="demo-uni-row">
					<uni-col :span="6">
						<view class="cleaner-top" @click="toPro">
							<view class="cleaner-avatar">
								<image :src="imgArr" mode=""></image>
							</view>
						</view>
					</uni-col>
					<uni-col :span="12">
						<view style="margin-top: 30upx;">
							<uni-row class="demo-uni-row" v-if="isShow &&user.nickname==null">
								<uni-col :span="12">
									<text>润隆汇</text>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row" v-else-if="user.nickname !=null">
								<uni-col :span="12">
									{{user.nickname}}
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row" v-else>
								<uni-col :span="12">
									<text @click="toLogin">HI~请登录</text>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="21">
									<view @click="toUser()" v-if="customer ==null || customer.bookingTime ==null ">
										<text>请选择您的酒席之日</text>
										<image class="pencil-icon" src="/static/pen.png" mode="aspectFit"></image>
									</view>
									<view @click="toUser()" v-else>
										<text>{{customer.bookingTime}}</text>
										<image class="pencil-icon" src="/static/pen.png" mode="aspectFit"></image>
									</view>
								</uni-col>
							</uni-row>
						</view>

					</uni-col>
				</uni-row>
				<!-- 预定状态 -->
				<uni-row class="demo-uni-row">
					<view style="margin-top: 40upx;">
						您预定的日期：<text v-if="customer ==null || customer.status==null" style="color: red">未开始</text>
						<text v-else-if="customer.status=='ON_ORDER'" style="color: #02a24f">未下单</text>
						<text v-else style="color: #2eabff;">已下单</text>
					</view>

				</uni-row>
			</view>
		</view>
		<!-- 功能菜单的展示-->
		<view class="body-menu">
			<!-- 功能菜单的展示-->
			<uni-grid :column="4" :highlight="true" :showBorder="false" class="group-menu">
				<uni-grid-item v-for="(item, index) in group" :index="index" :key="index">
					<view @click="toGroupPage(item.menuId)" class="grid-item-box">
						<image :src="item.icon"></image>
						<view>{{item.title}}</view>
						<!-- <text class="text">文本信息</text> -->
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="body-botton">
			<view class="body-text">
				<text>其他工具</text>
			</view>
			<view class="body-menu">
				<uni-grid :column="4" :highlight="true" :showBorder="false" class="tool-menu">
					<uni-grid-item v-for="(item, index) in toolPerms" :index="index" :key="index">
						<view @click="toGroupPage(item)" class="tool-item-box">
							<image :src="item.icon"></image>
							<view>{{item.title}}</view>
							<!-- <text class="text">文本信息</text> -->
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr: "../../static/avatar.png",
				isNickname: false,
				user: {},
				group: [],
				toolPerms: [],
				customer: {}
			}
		},
		methods: {
			//去个人主页
			toPro() {
				if (uni.getStorageSync("token")) {
					uni.navigateTo({
						url: "/pages/user/profile"
					})
				} else {
					this.$api.user.toLogin()
				}
			},

			// 选择图片
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						if (tempFilePaths.length > 0) {
							// 更新页面的渲染
							this.imgArr = tempFilePaths[0]
							// 上传图片
							this.uploadAvatar()
						}
					}
				})
			},
			toUser() {
				if (uni.getStorageSync("token")) {
					uni.navigateTo({
						url: "/pages/feast/ReserveSeats"
					})
				} else {
					this.$api.user.toLogin()
				}

			},
			toGroupPage(param) {
				if (uni.getStorageSync("token")) {
					if (param.menuCode == "SET") {
						uni.navigateTo({
							url: param.url
						})
					} else if (param.menuCode == "SERVER") {
						//联系客服 SHARE
						this.toPhone()
					} else if (param.menuCode == "SHARE") {
						//分享润隆汇
						this.shareToTimeline()
					}

				} else {
					this.$api.user.toLogin()
				}
			},
			//联系客服
			toPhone() {
				uni.makePhoneCall({
					phoneNumber: "10086", //要拨打的手机号
					success: (res) => {
						// console.log("调用成功")
					},
					fail: (res) => {
						// console.log('调用失败!')
					}
				})
			},
			shareToTimeline() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://uniapp.dcloud.io/",
					title: "uni-app分享",
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//上传用户头像
			async uploadAvatar() {
				const data = await this.$api.user.uploadAvatar(this.imgArr)

			},
			//去登录
			toLogin() {
				this.$api.user.toLogin()
			},
			//查询菜单列表
			async queryUserPermissionList() {
				const {
					status,
					data,
					msg
				} = await this.$api.goods.queryAppPermissionListAction()
				if (status == 200) {
					if (data.homePerms.length > 0) {
						for (let i = 0; i < data.homePerms.length; i++) {
							data.homePerms[i].icon = this.$store.state.url + data.homePerms[i].icon
						}
						this.group = data.homePerms
					}
					if (data.toolPerms.length > 0) {
						for (let i = 0; i < data.toolPerms.length; i++) {
							data.toolPerms[i].icon = this.$store.state.url + data.toolPerms[i].icon
						}
						this.toolPerms = data.toolPerms
					}
					// console.log(data)
				}
			},
			async queryCustomer() {
				const {
					status,
					data,
					msg
				} = await this.$api.customer.queryCustomer()
				if (status == 200 && data != null) {
					this.customer = data

				}
			}
		},
		onLoad() {
			if (this.$store.state.userInfo != "") {
				this.imgArr = this.$store.state.url + this.$store.state.userInfo.avatarUrl
				this.user = this.$store.state.userInfo
				this.isShow = true
				console.log(this.$store.state.userInfo)
				this.queryCustomer()
			} else {
				this.isShow = false
				this.imgArr = "../../static/avatar.png"
			}
			this.queryUserPermissionList()

		},
		onShow() {
			const data = this.$store.state.userInfo

			if (uni.getStorageSync("token")) {
				this.imgArr = this.$store.state.url + this.$store.state.userInfo.avatarUrl
				 this.user = this.$store.state.userInfo
				this.isShow = true
				this.queryCustomer()
			} else {
				this.isShow = false

			}

		}

	}
</script>

<style scoped lang="less">
	.content {

		//顶部区域
		.top_bj {
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, #FA541C, transparent);
			padding-top: 100upx;

			//用户头像区域
			.user-pic {
				width: 95%;
				height: 300upx;
				background-color: white;
				margin: auto;
				border-radius: 3%;
				padding-top: 30upx;
				padding-left: 20upx;

				//头像样式
				.cleaner-top {
					width: 140upx;
					height: 140upx;
					border-radius: 50%;
					// background-image: url("../../static/avatar.png");
					margin-top: 20upx;

					image {
						width: 140upx;
						height: 140upx;
						border-radius: 50%;
					}
				}

				//文本图标样式
				.pencil-icon {
					width: 30upx;
					height: 30upx;
					margin-left: 1px;

				}
			}

		}

		//功能菜单
		.body-menu {
			width: 95%;
			height: 100%;
			background-color: white;
			border-radius: 3%;
			margin: auto;
			margin-top: 20upx;

			//分类菜单样式
			.group-menu {
				// margin-top: 10upx;
				padding: 10upx;
				height: 100%;
				background-color: white;

				//单个菜单
				.grid-item-box {
					text-align: center;
					font-size: 28upx;
					margin-top: 40upx;

					image {
						width: 60upx;
						height: 60upx;
						// border-radius: 50%;
						/* 水平半径/垂直半径 */
						// background: #eefeff;

					}
				}
			}


		}

		// 其他工具样式
		.body-botton {
			width: 100%;
			height: 100%;
			background-color: white;
			border-radius: 3%;
			margin: auto;
			margin-top: 20upx;

			.body-text {
				width: 90%;
				height: 30upx;
				line-height: 30upx;
				padding-top: 30upx;
				padding-left: 20upx;
				font-size: 30upx;
			}

			.tool-menu {
				padding: 10upx;
				height: 100%;

				.tool-item-box {
					text-align: center;
					font-size: 28upx;
					margin-top: 40upx;

					image {
						width: 60upx;
						height: 60upx;
						// border-radius: 50%;
						/* 水平半径/垂直半径 */
						// background: #eefeff;

					}
				}
			}
		}
	}
</style>